<script type="text/javascript">
	var directionsDisplay; 
	var directionsService = new google.maps.DirectionsService();
	var map;
	var table = [];
	var i = 0 , j = 1;
	var markers = [];
	var waypts = [];
	function initialize() {

	directionsDisplay = new google.maps.DirectionsRenderer();

	var lille = new google.maps.LatLng(50.650,3.083);
	var mapOptions = {
    zoom:13,
    center: lille
	}

	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	directionsDisplay.setMap(map);
 
	google.maps.event.addListener(map, 'click', function(event){
		addMarker(event.latLng);
	});

	calcRoute();
}


function addMarker(location) {
	var marker = new google.maps.Marker({
    position: location,
    map: map
	});
	markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(map);
	}
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
	setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}


function calcRoute(){
	
	var arrayLat= <?php echo json_encode($arrayLat); ?>;
	var arrayLon= <?php echo json_encode($arrayLon); ?>;

	for(var i=0;i<arrayLat.length;i++){
		table.push(new google.maps.LatLng(arrayLat[i],arrayLon[i]));
	}

	var traceParcours = new google.maps.Polyline({
    path: table,//chemin du tracé
    strokeColor: "#FF0000",//couleur du tracé
    strokeOpacity: 1.0,//opacité du tracé
    strokeWeight: 2//grosseur du tracé
	});

	traceParcours.setMap(map);
	var center = parseInt(arrayLat.length / 2, 10);
	map.setCenter(new google.maps.LatLng(arrayLat[center],arrayLon[center]));
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<html>
<body>
<div id="map-canvas">
<!-- endroit ou la map est placée -->
</div>
</body>
</html>
